// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

//   &:focus {
//     color: @color;
//     background-color: darken(@background, 10%);
//     border-color: darken(@border, 25%);
//   }
//   &:hover, 
  &:active {
    color: @color;
    background-color: darken(@background, 10%);
    border-color: darken(@border, 12%);
  }
  &:active {
    background-image: none;
  }
  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    opacity: .65;
    &:hover,
    &:focus,
    &.focus {
      background-color: @background;
      border-color: @border;
    }
  }
}

// Button sizes
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  line-height: @line-height;
  border-radius: @border-radius;
}

.btn {
  display: inline-block;
  padding: 4px 8px;
  margin-bottom: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
//   border-radius: 4px;
  &.btn-block {
    width: 100%;
  }

  &.btn-default {
    .button-variant(#fff; @success; @success)
  }
  &.btn-primary {
    .button-variant(#fff; @primary; @primary)
  }
  &.btn-warning {
    .button-variant(#fff; @warning; @warning)
  }
  &.btn-danger {
    .button-variant(#fff; @danger; @danger)
  }
  &.btn-gray {
    .button-variant(#fff; @disabled; @disabled)
  }
}